@import 'common';


$w: 100%;

//伪元素设置三角形
@mixin line_left($border-color: transparent transparent #8ec5ff #8ec5ff) {
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 8px;
    border-color: $border-color;
    position: relative;
    top: -1px
}



//内容
.project {

    main {

        //内容顶部部分
        .main_top {
            @extend %main_top;
        }

        //内容部分
        .main_content {
            
            background-color: #fafafa;
            width: 900px;
            margin: 0 auto;

            // 三行类型分类——ul部分
            .ul_classify {
                margin-top: 28px;

                li {

                    margin-bottom: 8px;

                    img {
                        width: 38px;
                        height: 38px;
                        vertical-align: middle;
                    }

                    .li_text {
                        display: inline-block;
                        font-size: 12px;

                        span:nth-child(1) {
                            margin-left: 4px;
                            font-size: 16px;
                        }

                        span:nth-child(2) {
                            color: #8ec5ff;
                        }
                    }
                }
            }

            //列表部分
            .list {
                margin-top: 22px;
                border-bottom: 1px solid #8ec5ff;
                .list_top {
                    display: flex;
                    justify-content: space-between;
                    overflow: hidden;
                    //div盒子做成两条横线
                    .line {
                        width: 72px;
                        height: 38px;
                        border-top: 1px solid #8ec5ff;
                    }
                    //伪元素三角形左边
                    ._left::before {
                        @include line_left;
                        left: 72px;
                    
                    }
                    //伪元素三角形右边
                    ._right::before {
                       @include line_left(transparent #8ec5ff #8ec5ff  transparent);
                        left: -16px;
                    }
                    //顶部的文字部分
                    ul {
                        flex: 1;
                        border-bottom: 1px solid #8ec5ff;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                    }
                }
                .list_content{
                    //margin-left: 70px;
                    width: 756px;
                    
                    margin: 0 auto;
                    box-sizing: border-box;
                    padding-right: 50px;
                    ul{
                        margin-bottom: 17px;
                        li{
                            margin-top: 24px;
                            font-size: 12px;
                            display: flex;
                            justify-content: space-between;
                            span:nth-child(2){
                                position: relative;
                                left: -25px;
                            }
                            &:nth-child(1){
                                margin-top: 19px;
                            }
                        }
                        
                        
                    }
                }
            }
            //翻页部分
            .page{
                display: flex;
                width: 100%;
                height: 56px;
                
                justify-content: center;
                align-items: center;
                li{
                    background-color: gainsboro;
                    width: 18px;
                    height: 18px;
                    
                    border-radius: 3px;
                    line-height: 18px;
                    text-align: center;
                    font-size: 12px;
                    margin-left: 5px;
                    

                    &:first-child{
                        width: 49px;
                    }
                    &:nth-child(2){
                        background-color: #8ec5ff;
                        color: #fafafa;
                    }
                    &:last-child{
                        width: 49px;
                    }
                }
            }
        }

    }
}